let $ = (sel) => document.querySelector(sel),
    trim = (str) => str.replace(/(\s*) | (\s*)$/g,'');
    

// 搜索
let search = $('#search'),
    tbody = $('#tab tbody'),
    count_ele = $('#count'),
    order_ele = $('#order'),
    page_box = $('.page_box'),
    prev = $('#prev'),
    next = $('#next');

search.addEventListener('input',(e) => {
    let data_s = getSearchData();
    renderPage(data_s);
})

// 渲染数据
function renderData(data){
    data = data === undefined ? datas : data;
    //data.sort(function(x,y){return x.sorc - y.sorc});
    // 获取order排序方式
    let order = order_ele.value;
    let fn = (x,y) => {return x[order] - y[order]};
    if(order === 'name'){
        fn = (x,y) => new Intl.Collator('zh-Hans-CN', { sensitivity: 'accent' }).compare(x.name, y.name);
    }
    data.sort(fn);
    // 渲染数据
    tbody.innerHTML = data.map((row,i) => {
        return `<tr> 
                   <td>${row.name}</td>
                   <td>${row.age}</td>
                   <td>${row.sorc}</td>
                   <td>${row.level}</td>
                </tr>`;
    }).join('');
}

function renderPage(data){
    data = data === undefined ? datas : data;
    // 渲染分页
    let count = count_ele.options[count_ele.selectedIndex].value,
        order = order_ele.options[order_ele.selectedIndex].value,
        pages = Math.ceil(data.length / count),
        page_list = page_box.querySelector('ul'),
        li = '',
        startIdx,
        endIdx,
        everyPage = data.slice(0,count),
        curPageNo;
    page_box.classList.add('show');
    // 循环页数
    for(let p = 0; p < pages; p++){
        let l = '<li data-page="' + p + '">';
        if(p == 0) l = '<li  data-page="' + p + '" class="cur">';
        li += l + (p+1) + '</li>';
        // startIdx = p * count;
        // endIdx = (p+1) * count;
        // everyPage = data.slice(startIdx,endIdx);
    }
    renderData(everyPage);
    page_list.innerHTML = li;
    //page_list.firstElementChild.classList.add('cur');
    // 点击页数高亮显示
    page_list.addEventListener('click',(e) => {
        let target = e.target;
        if(target.nodeName === 'LI'){
            curPageNo = target.getAttribute('data-page') * 1;
            showCurrentPage();
        }
    });
        // 下一页
    next.addEventListener('click',() => {
        if(pages === 1) return;
        let cur = $('.cur').getAttribute('data-page') * 1;
        curPageNo = cur + 1;
        if(curPageNo >= pages) return;
        showCurrentPage();
    });
    prev.addEventListener('click',() => {
        if(pages === 1) return;
        let cur = $('.cur').getAttribute('data-page') * 1;
        curPageNo = cur - 1;
        if(curPageNo < 0) return;
        showCurrentPage();
    })
    // 显示当前页的数据
    function showCurrentPage(){
        console.log(curPageNo);
        let startIdx = curPageNo * count,
            endIdx = (curPageNo + 1) * count,
            everyPage = data.slice(startIdx,endIdx),
            cur = $('.cur'),
            lis = page_list.children;
            cur && cur.classList.remove('cur');
            lis[curPageNo].classList.add('cur');
            renderData(everyPage);
    }
}
renderPage();

// 选择条数
count_ele.addEventListener('change',(e) => {
    let count = count_ele.value;
    renderPage(getSearchData());
});

// 选择排序方式
order_ele.addEventListener('change',(e) => {
    renderPage(getSearchData());
});

// 获取搜索到的数据
function getSearchData(){
    let data_s = [],
    keyword = trim(search.value);
    if(keyword === ''){
        data_s = datas;
    }else{
        datas.forEach((data,idx) => {
            if(data.name.indexOf(keyword) === 0){
                data_s.push(data);
            }
        });
    }
    return data_s;
}